<template>
  <div>
      <div class="tab-card">
        <!-- 卡片顶部 -->
        <router-link :to="{path:'/home/detail',query:{pid:project.id}}" tag="a">
          <!--          <a href="details.html" target="_blank">-->
          <div class="card-head" :style="{'backgroundImage':`url('${project.thumb}')`}">
            <div class="card-tag" v-if="state==1">{{ $t('state.live') }}</div>
            <div class="card-tag tag-color1" v-else-if="state==0">{{ $t('state.oncoming') }}</div>
            <div class="card-tag tag-color2" v-else-if="state==2">{{ $t('state.completed') }}</div>
            <div class="c-head-top">
              <div class="title">
                <h1>{{ project.title }}</h1>
                <p>({{ project.Subtitle }})</p>
              </div>
              <div class="logo">
                <img width="33" height="33" :src="project.icon" alt=""/>
              </div>
            </div>
            <div class="c-head-bottom">
              <span class="tag" :class="['tag'+(i+1)]" v-for="(tag,i) in cutTypes" :key="i">{{ tag }}</span>
            </div>
          </div>
          <div class="card-con">
            <p>{{ $t('type') }}:</p>
            <h1>{{ project.type }}</h1>
            <div class="card-con-sc">
              <div v-if="project.qfmax">
                <p>{{ $t('qfMax') }}:</p>
                <span>{{ project.qfmax |cutOutNum }}</span> {{ project.qfmaxname }}
              </div>
              <div>
                <p>{{$t('qfAmount')}}:</p>
                <span>{{ project.qfamount |cutOutNum }}</span>
              </div>
            </div>
            <p>{{$t('targetRaise')}}:</p>
            <div><span>{{ project.tagetraise |cutOutNum }}</span> {{ project.convertunit}}</div>
            <div class="card-con-sc">
              <div>
                <p>{{$t('swapRate')}}:</p>
                <span>1</span> {{ project.convertunit}} = <span>{{ project.swaprate }}</span> {{ project.symbol }}
              </div>
              <div >
                <p>{{$t('salePrice')}}:</p>
                <span>${{ project.saleprice || "null" }}</span>
              </div>
            </div>
            <div>
              {{$t('startDateTime')}}: &nbsp;<span>{{ project.startin }}</span>&nbsp;&nbsp;UTC
            </div>
            <div>
              {{$t('endDateTime')}}: &nbsp;<span>{{ project.closein }}</span>&nbsp;&nbsp;UTC
            </div>
            <div class="progress">
              <div class="pro-tw">
                <span>{{$t('progress')}}</span>
                <span>{{$t('participants')}}: {{ project.participants }}</span>
              </div>
              <div class="pro-con">
                <div class="pro-box">
                  <div class="pro-num" :style="{width:project.standpercent+'%'}"></div>
                </div>
              </div>
              <div class="pro-btm">
                <span>{{ project.standpercent + '%' }}</span>
                <span>{{$t('fundRaise')}}:≈{{ project.fundraise | cutOutNum }} {{ project.qfmaxname}}</span>
              </div>
            </div>
          </div>
          <!--          </a>-->
        </router-link>
      </div>
  </div>
</template>

<script>
import {cutOutNum} from "@/utils/defined";

export default {
  name: `projectCard`,
  filters: {cutOutNum},
  props: {
    project: {
      type: Object,
      default: () => {
        return {
          abbtype:""
        }
      }
    },
    state: {
      type: Number,
      default: () => 0
    }
  },
  computed: {
    // 一个计算属性的 getter
    cutTypes() {
      // `this` 指向当前组件实例
      return this.project.abbtype.split("#")
    }
  }
}
</script>

<style scoped>

</style>
